<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>transform组件</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    #test{
        height: 100px;
        width: 100px;
        background-color: pink;
        /* transform: translateX(100px) scale(2); */
    }
    </style>
</head>
<body>
    <div id="test">
    </div>
    <script src="../js//transform.js"></script>
    <script >
    // 定义css函数对transform的值进行读写操作
    // css(node,type) 读
    // css(node,type,val)写(哪一个节点,取什么变换,变换的值)
    // 规避覆盖的风险
    // translateX
    // translateY
    // scale
    // rotate  2D转换，旋转，单位：deg，角度
    var test=document.querySelector("#test")
    damu.css(test,"translateX",100);
    damu.css(test,"translateX",200);
    damu.css(test,"scale",2);
    console.log( damu.css(test,"translateX"))
//     function css(node,type,val){
//     if(typeof node==="object"&&typeof node["transform"]==="undefined"){
//         node["transform"]={}
//     }
//     if(arguments.length>=3){
//         var text="";
//         node["transform"] [type]=val;
//         for(item in  node["transform"]){
//             if( node["transform"].hasOwnProperty(item)){//如果item是对象的直接属性
//             switch (item) {
//                 case "translateX":
//                 case "translateY":
//                     text +=item+"("+node["transform"] [item]+"px)"
//                     break;
//                     case "scale":
//                     text +=item+"("+node["transform"] [item]+")"
//                     break;
//                     case "rotate":
//                     text +=item+"("+node["transform"] [item]+"deg)"
//                     break;
//             }
//             }
//         }
//             node.style.transform=node.style.webkitTransform=text;
       
//     }else if(arguments.length===2){
//         val=node["transform"][type];
//         if(typeof val==="undefined"){
//         switch (type) {
//                 case "translateX":
//                 case "translateY":
//                 case "rotate":
//                  val=0;
//                 break;
//                 case "scale":
//                  val=1;
//                 break;
//         }
//         }
//         return val;
//     }
// }
    </script>
</body>
</html>
